'use strict'

import React from 'react'
import Lunbo from './swiper'
import Swipers from '../../config/swiper1.min'

class SwipeKing extends React.Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentDidMount () {
    const mySwiper = new Swipers('.swiper-container', {
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      grabCursor: true,
      paginationClickable: true,
      //        spaceBetween: 3000,
      slidesPerView: 1,
      autoplay: 3000,
      loop: true
    })
  }

  render () {
    const { swiper } = serverData

    return (
      <div className="swiper-container">
        <div className={'swiper-wrapper'}>
          <div className={'swiper-slide'}><Lunbo nums='1' list={swiper[0]}/></div>
          <div className={'swiper-slide'}><Lunbo nums='2' list={swiper[1]}/></div>
          <div className={'swiper-slide'}><Lunbo nums='3' list={swiper[2]}/></div>
          <div className={'swiper-slide'}><Lunbo nums='4' list={swiper[3]}/></div>
        </div>
        <div className={'swiper-pagination'}></div>
        <div className={'swiper-button-next'}></div>
        <div className={'swiper-button-prev'}></div>
      </div>
    )
  }
}

export default SwipeKing
